import {Card, message} from 'antd';
import React, {useEffect, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {queryTslaStrategyLog} from './service';
import {DateStamp, empty, NumberMul} from "@/utils/function";
import {queryUse} from "@/utils/service";
import "@/components/Echarts/EchartsOne";
import EchartsOne from "@/components/Echarts/EchartsOne";

const TSLNet: React.FC = () => {

  // @ts-ignore
  const [seriesHY, setSeriesHY] = useState<any>(null);
  const [seriesHYTHREE, setSeriesHYTHREE] = useState<any>(null);
  const [seriesCHENGXU, setSeriesCHENGXU] = useState<any>(null);
//投资金额 指数价格  买入数量 买入金额 卖出数量 卖出金额
  const openLinesSum = async () => {
    const msg = await queryTslaStrategyLog();
    // debugger
    let data = queryUse(msg);
    if (!empty(data)) {
      let dataHY: any[] = [];
      let dataCX: any[] = [];
      // @ts-ignore
      data.map((a: any) => {
        if (a.account === "hy") {
          dataHY.push(a)
        }
        if (a.account === "chenxu") {
          dataCX.push(a)
        }

      })
      dataHY.sort((a, b) => {
        return DateStamp(a.expiry) - DateStamp(b.expiry)
      })
      dataCX.sort((a, b) => {
        return DateStamp(a.expiry) - DateStamp(b.expiry)
      })
      let dataMap = {"HY": dataHY, "CHENGXU": dataCX}
      //红色的是usd_equity 要除以初始  灰色的是con_index 除以初始  蓝色的是equityt

      for (let name in dataMap) {
        let data = dataMap[name];
        let dataLines: any = {
          timeList: [],
          usdEquityList: [],
          coinIndexList: [],
          equityList: [],
        }
        for (let i in data) {
          dataLines.timeList.push(data[i].date.split(' ')[0]);
          // dataLines.usdEquityList.push(
          //   NumberMul(data[i].usdEquity/data[0].usdEquity,1,4)
          // );
          dataLines.coinIndexList.push(
            NumberMul(data[i].stockValue / data[0].stockValue, 1, 4)
          );
          dataLines.equityList.push(
            NumberMul(data[i].net, 1, 4)
          );
        }
        let series = {
          title: {
            text: name + ' Tesla策略净值曲线图'
          },
          tooltip: {
            trigger: 'axis',
          },
          // toolbox: {
          //   feature: {
          //     saveAsImage: {}
          //   }
          // },
          legend: {
            // data: ['收益']
          },
          xAxis: {
            type: 'category',
            axisTick: {
              show: false,
            },
            axisLabel: {
              showMaxLabel: true,
              // normal
              color: '#333333',
              showMinLabel: true,
              fontSize: 13,
              padding: [10, 4, 10, 4],
            },

            // boundaryGap: ['20%', '20%'],
            axisLine: {
              lineStyle: {
                color: 'rgba(155,155,155,0.7)',
                width: 1,
                type: 'dashed',
              },
            },
            position: 'bottom',
            // splitNumber:8,
            data: dataLines.timeList,
          },
          dataZoom: [
            {
              show: true,
              xAxisIndex: 0,
              type: 'inside',
              start: 0,
              end: 100,
              // minValueSpan: 10,
            },
          ],
          yAxis:
            {
              max(value: any) {
                return value.max > 1.05 ? (value.max + 0.05).toFixed(1) : 1.05;
              },
              min(value: any) {
                return value.min < 0.95 ? (value.min - 0.05).toFixed(1) : 0.95;
              },
              type: 'value',
              position: 'right',
            },
          series: [
            {
              name: '策略净值',
              data: dataLines.equityList,
              type: 'line',
              showSymbol: false,
              itemStyle: {
                color: '#357ad2',
              },
              lineStyle: {
                width: 2,
              },
              endLabel: {
                show: true, position: 'right', formatter: (params: any) => {
                  if (dataLines.equityList.length - 1 === params.dataIndex) {
                    return params.value[1];
                  } else {
                    return '';
                  }
                },
              },
            },
            {
              name: '净值（TSLA）',
              data: dataLines.coinIndexList,
              type: 'line',
              showSymbol: false,
              itemStyle: {
                color: '#c34848',
              },
              lineStyle: {
                width: 2,
              },
              endLabel: {
                show: true, position: 'right', formatter: (params: any) => {
                  if (dataLines.coinIndexList.length - 1 === params.dataIndex) {
                    return params.value[1];
                  } else {
                    return '';
                  }
                },
              },
            },

            // {
            //   name: '净值（USD）',
            //   data: dataLines.usdEquityList,
            //   type: 'line',
            //   showSymbol: false,
            //   itemStyle:{
            //     color: '#d93838',
            //   },
            //   lineStyle: {
            //     width: 2,
            //   },
            //   endLabel: {
            //     show: true, position: 'right', formatter: (params:any) => {
            //       if (dataLines.usdEquityList.length - 1 === params.dataIndex) {
            //         return  params.value[1];
            //       } else {
            //         return '';
            //       }
            //     },
            //   },
            // },
          ]
        }
        if (name === "HY") {
          setSeriesHY(series);
        }
        if (name === "CHENGXU") {
          setSeriesCHENGXU(series);
        }

      }

      let dataHYTHREE: any = {
        timeList: [],
        ["hy"]: [],
        ["hy_1"]: [],
        ["hy_sum"]: [],
        ["qqq"]: [],
        ["tsla"]: [],
      };
      // @ts-ignore
      let qqqValueFirst: number = 0;
      let tslaValueFirst: number = 0;
      data.map((a: any) => {
        if (a.account === "hy") {
          dataHYTHREE["timeList"].push(a.date.split(' ')[0])
          dataHYTHREE["hy"].push([a.date.split(' ')[0],a.net])
          if(!tslaValueFirst){
            tslaValueFirst = a.stockValue;
          }
          dataHYTHREE["tsla"].push([a.date.split(' ')[0],
            NumberMul(a.stockValue / tslaValueFirst, 1, 4)
          ])
        }
        if (a.account === "hy_1") {
          dataHYTHREE["hy_1"].push([a.date.split(' ')[0],a.net])
        }
        if (a.account === "hy_sum") {
          if(!qqqValueFirst){
            qqqValueFirst = a.stockValue;
          }
          dataHYTHREE["hy_sum"].push([a.date.split(' ')[0],a.net])
          dataHYTHREE["qqq"].push([a.date.split(' ')[0],
            NumberMul(a.stockValue / qqqValueFirst, 1, 4)
          ])
        }
      })
      let seriesTHREE = {
        title: {
          text: '账户净值'
        },
        tooltip: {
          trigger: 'axis',
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        legend: {
          data: [ 'TSLA策略净值','期权策略净值','总账户净值','TSLA基准净值','QQQ基准净值',],
          selected: {
            'TSLA策略净值': true,
            '期权策略净值': true,
            '总账户净值': true,
            'TSLA基准净值': false,
            'QQQ基准净值': false,
          },
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false,
          },
          axisLabel: {
            showMaxLabel: true,
            // normal
            color: '#333333',
            showMinLabel: true,
            fontSize: 13,
            padding: [10, 4, 10, 4],
          },

          // boundaryGap: ['20%', '20%'],
          axisLine: {
            lineStyle: {
              color: 'rgba(155,155,155,0.7)',
              width: 1,
              type: 'dashed',
            },
          },
          position: 'bottom',
          // splitNumber:8,
          data: dataHYTHREE.timeList,
        },
        dataZoom: [
          {
            show: true,
            xAxisIndex: 0,
            type: 'inside',
            start: 0,
            end: 100,
            // minValueSpan: 10,
          },
        ],
        yAxis:
          {
            max(value: any) {
              return value.max > 1.05 ? (value.max + 0.05).toFixed(1) : 1.05;
            },
            min(value: any) {
              return value.min < 0.95 ? (value.min - 0.05).toFixed(1) : 0.95;
            },
            type: 'value',
            position: 'right',
          },
        series: [
          {
            name: 'TSLA策略净值',
            data: dataHYTHREE["hy"],
            type: 'line',
            showSymbol: false,
            itemStyle: {
              color: '#8ed938',
            },
            lineStyle: {
              width: 3,
            },
            endLabel: {
              show: true, position: 'right', formatter: (params: any) => {
                if (dataHYTHREE["hy"].length - 1 === params.dataIndex) {
                  return params.value[1];
                } else {
                  return '';
                }
              },
            },
          },
          {
            name: '期权策略净值',
            data: dataHYTHREE["hy_1"],
            type: 'line',
            showSymbol: false,
            itemStyle: {
              color: '#a248c3',
            },
            lineStyle: {
              width: 3,
            },
            endLabel: {
              show: true, position: 'right', formatter: (params: any) => {
                if (dataHYTHREE["hy_1"].length - 1 === params.dataIndex) {
                  return params.value[1];
                } else {
                  return '';
                }
              },
            },
          },

          {
            name: '总账户净值',
            data: dataHYTHREE["hy_sum"],
            type: 'line',
            showSymbol: false,
            itemStyle: {
              color: '#357ad2',
            },
            lineStyle: {
              width: 3,
            },
            endLabel: {
              show: true, position: 'right', formatter: (params: any) => {
                if (dataHYTHREE["hy_sum"].length - 1 === params.dataIndex) {
                  return params.value[1];
                } else {
                  return '';
                }
              },
            },
          },
          {
            name: 'TSLA基准净值',
            data: dataHYTHREE["tsla"],
            type: 'line',
            showSymbol: false,
            itemStyle: {
              color:'#c34848',
            },
            lineStyle: {
              width: 2,
            },
            endLabel: {
              show: true, position: 'right', formatter: (params: any) => {
                if (dataHYTHREE["tsla"].length - 1 === params.dataIndex) {
                  return params.value[1];
                } else {
                  return '';
                }
              },
            },
          },
          {
            name: 'QQQ基准净值',
            data: dataHYTHREE["qqq"],
            type: 'line',
            showSymbol: false,
            itemStyle: {
              color:'#c38848',
            },
            lineStyle: {
              width: 2,
            },
            endLabel: {
              show: true, position: 'right', formatter: (params: any) => {
                if (dataHYTHREE["qqq"].length - 1 === params.dataIndex) {
                  return params.value[1];
                } else {
                  return '';
                }
              },
            },
          },

        ]
      }
      setSeriesHYTHREE(seriesTHREE);
      // setLastDay(lastDay);
      // handleTradeModal({symbol: record.symbol,})
      // handleDetailModalVisible(true);
    } else {
      message.error("暂无数据")
    }

  }
  useEffect(() => {
    openLinesSum().then(r => {
    });
  }, [])
  useEffect(() => {
    openLinesSum().then(r => {
    });
  }, [name])
  return (
    <PageContainer>
      <Card>
        <EchartsOne chartId={"账户净值"} series={seriesHYTHREE}/>
        <br/>
        <br/>
        <EchartsOne chartId={"TSLANet以太坊期权管理hy"} series={seriesHY}/>
        <br/>
        <br/>
        <EchartsOne chartId={"TSLANet以太坊期权管理cx"} series={seriesCHENGXU}/>
      </Card>
    </PageContainer>
  );
};

export default TSLNet;
